<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Button component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Button</h1>

            <p data-uk-margin>
                <a class="uk-button" href="#">Link</a>
                <button class="uk-button" type="reset">Button</button>
                <button class="uk-button" type="button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-primary" href="#">Link</a>
                <button class="uk-button uk-button-primary" type="reset">Button</button>
                <button class="uk-button uk-button-primary" type="button">Button</button>
                <button class="uk-button uk-button-primary">Button</button>
                <button class="uk-button uk-button-primary" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-success" href="#">Link</a>
                <button class="uk-button uk-button-success" type="reset">Button</button>
                <button class="uk-button uk-button-success" type="button">Button</button>
                <button class="uk-button uk-button-success">Button</button>
                <button class="uk-button uk-button-success" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-danger" href="#">Link</a>
                <button class="uk-button uk-button-danger" type="reset">Button</button>
                <button class="uk-button uk-button-danger" type="button">Button</button>
                <button class="uk-button uk-button-danger">Button</button>
                <button class="uk-button uk-button-danger" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-link" href="#">Link</a>
                <button class="uk-button uk-button-link" type="reset">Button</button>
                <button class="uk-button uk-button-link" type="button">Button</button>
                <button class="uk-button uk-button-link">Button</button>
                <button class="uk-button uk-button-link" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-mini" href="#">Link</a>
                <button class="uk-button uk-button-primary uk-button-mini" type="reset">Button</button>
                <button class="uk-button uk-button-success uk-button-mini" type="reset">Button</button>
                <button class="uk-button uk-button-danger uk-button-mini" type="reset">Button</button>
                <button class="uk-button uk-button-mini" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-small" href="#">Link</a>
                <button class="uk-button uk-button-primary uk-button-small" type="reset">Button</button>
                <button class="uk-button uk-button-success uk-button-small" type="reset">Button</button>
                <button class="uk-button uk-button-danger uk-button-small" type="reset">Button</button>
                <button class="uk-button uk-button-small" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-large" href="#">Link</a>
                <button class="uk-button uk-button-primary uk-button-large" type="reset">Button</button>
                <button class="uk-button uk-button-success uk-button-large" type="reset">Button</button>
                <button class="uk-button uk-button-danger uk-button-large" type="reset">Button</button>
                <button class="uk-button uk-button-large" disabled>Disabled</button>
            </p>

            <p>
                <a class="uk-button uk-button-mini uk-width-1-1 uk-margin-bottom" href="#">Link</a>
                <button class="uk-button uk-button-small uk-button-primary uk-width-1-1 uk-margin-bottom" type="reset">Button</button>
                <button class="uk-button uk-button-success uk-width-1-1 uk-margin-bottom" type="reset">Button</button>
                <button class="uk-button uk-button-large uk-button-danger uk-width-1-1 uk-margin-bottom" type="reset">Button</button>
                <button class="uk-button uk-button-large uk-width-1-1" disabled>Disabled</button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-mini" href="#"><i class="uk-icon-cog"></i> Link <i class="uk-icon-cog"></i></a>
                <button class="uk-button uk-button-primary uk-button-mini" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-success uk-button-mini" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-danger uk-button-mini" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-mini" disabled><i class="uk-icon-cog"></i> Disabled <i class="uk-icon-cog"></i></button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-small" href="#"><i class="uk-icon-cog"></i> Link <i class="uk-icon-cog"></i></a>
                <button class="uk-button uk-button-primary uk-button-small" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-success uk-button-small" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-danger uk-button-small" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-small" disabled><i class="uk-icon-cog"></i> Disabled <i class="uk-icon-cog"></i></button>
            </p>

            <p data-uk-margin>
                <a class="uk-button" href="#"><i class="uk-icon-cog"></i> Link <i class="uk-icon-cog"></i></a>
                <button class="uk-button uk-button-primary" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-success" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-danger" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button" disabled><i class="uk-icon-cog"></i> Disabled <i class="uk-icon-cog"></i></button>
            </p>

            <p data-uk-margin>
                <a class="uk-button uk-button-large" href="#"><i class="uk-icon-cog"></i> Link <i class="uk-icon-cog"></i></a>
                <button class="uk-button uk-button-primary uk-button-large" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-success uk-button-large" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-danger uk-button-large" type="reset"><i class="uk-icon-cog"></i> Button <i class="uk-icon-cog"></i></button>
                <button class="uk-button uk-button-large" disabled><i class="uk-icon-cog"></i> Disabled <i class="uk-icon-cog"></i></button>
            </p>

            <h2>Button group</h2>

            <div class="uk-margin" data-uk-margin>
                <div class="uk-button-group">
                    <a class="uk-button uk-button-mini" href="#">Link</a>
                    <button class="uk-button uk-button-mini">Button</button>
                    <button class="uk-button uk-button-mini">Button</button>
                </div>

                <div class="uk-button-group">
                    <button class="uk-button uk-button-mini" disabled>Button</button>
                    <button class="uk-button uk-button-mini" disabled>Button</button>
                    <button class="uk-button uk-button-mini" disabled>Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-primary uk-button-mini" href="#">Link</a>
                    <button class="uk-button uk-button-primary uk-button-mini">Button</button>
                    <button class="uk-button uk-button-primary uk-button-mini">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-success uk-button-mini" href="#">Link</a>
                    <button class="uk-button uk-button-success uk-button-mini">Button</button>
                    <button class="uk-button uk-button-success uk-button-mini">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-danger uk-button-mini" href="#">Link</a>
                    <button class="uk-button uk-button-danger uk-button-mini">Button</button>
                    <button class="uk-button uk-button-danger uk-button-mini">Button</button>
                </div>
            </div>

            <div class="uk-margin" data-uk-margin>
                <div class="uk-button-group">
                    <a class="uk-button uk-button-small" href="#">Link</a>
                    <button class="uk-button uk-button-small">Button</button>
                    <button class="uk-button uk-button-small">Button</button>
                </div>

                <div class="uk-button-group">
                    <button class="uk-button uk-button-small" disabled>Button</button>
                    <button class="uk-button uk-button-small" disabled>Button</button>
                    <button class="uk-button uk-button-small" disabled>Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-primary uk-button-small" href="#">Link</a>
                    <button class="uk-button uk-button-primary uk-button-small">Button</button>
                    <button class="uk-button uk-button-primary uk-button-small">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-success uk-button-small" href="#">Link</a>
                    <button class="uk-button uk-button-success uk-button-small">Button</button>
                    <button class="uk-button uk-button-success uk-button-small">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-danger uk-button-small" href="#">Link</a>
                    <button class="uk-button uk-button-danger uk-button-small">Button</button>
                    <button class="uk-button uk-button-danger uk-button-small">Button</button>
                </div>
            </div>

            <div class="uk-margin" data-uk-margin>
                <div class="uk-button-group">
                    <a class="uk-button" href="#">Link</a>
                    <button class="uk-button">Button</button>
                    <button class="uk-button">Button</button>
                </div>

                <div class="uk-button-group">
                    <button class="uk-button" disabled>Button</button>
                    <button class="uk-button" disabled>Button</button>
                    <button class="uk-button" disabled>Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-primary" href="#">Link</a>
                    <button class="uk-button uk-button-primary">Button</button>
                    <button class="uk-button uk-button-primary">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-success" href="#">Link</a>
                    <button class="uk-button uk-button-success">Button</button>
                    <button class="uk-button uk-button-success">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-danger" href="#">Link</a>
                    <button class="uk-button uk-button-danger">Button</button>
                    <button class="uk-button uk-button-danger">Button</button>
                </div>
            </div>

            <div class="uk-margin" data-uk-margin>
                <div class="uk-button-group">
                    <a class="uk-button uk-button-large" href="#">Link</a>
                    <button class="uk-button uk-button-large">Button</button>
                    <button class="uk-button uk-button-large">Button</button>
                </div>

                <div class="uk-button-group">
                    <button class="uk-button uk-button-large" disabled>Button</button>
                    <button class="uk-button uk-button-large" disabled>Button</button>
                    <button class="uk-button uk-button-large" disabled>Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
                    <button class="uk-button uk-button-primary uk-button-large">Button</button>
                    <button class="uk-button uk-button-primary uk-button-large">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-success uk-button-large" href="#">Link</a>
                    <button class="uk-button uk-button-success uk-button-large">Button</button>
                    <button class="uk-button uk-button-success uk-button-large">Button</button>
                </div>

                <div class="uk-button-group">
                    <a class="uk-button uk-button-danger uk-button-large" href="#">Link</a>
                    <button class="uk-button uk-button-danger uk-button-large">Button</button>
                    <button class="uk-button uk-button-danger uk-button-large">Button</button>
                </div>
            </div>

            <h2>Javascript</h2>

            <p>
                <button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>
            </p>

            <div class="uk-margin">
                Checkbox Group
                <div class="uk-button-group" data-uk-button-checkbox>
                    <button class="uk-button">Button</button>
                    <button class="uk-button">Button</button>
                    <button class="uk-button">Button</button>
                </div>
            </div>

            <div class="uk-margin">
                Radio Group
                <div class="uk-button-group" data-uk-button-radio>
                    <button class="uk-button">Button</button>
                    <button class="uk-button">Button</button>
                    <button class="uk-button">Button</button>
                </div>
            </div>

        </div>

    </body>
</html>